<template>
  <div>
    <div class="contentlist" style="height: 100px;width: 150px;margin-left: 100px;margin-top: 50px;float: left">
        <br><h3>今日出库总量:</h3><br><h3>{{this.daySUM}}</h3>
    </div>
    <div class="contentlist" style="height: 100px;width: 150px;margin-left: 100px;margin-top: 50px;float: left">
        <br><h3>商品出库MAX:</h3><br><h3>{{this.goodMAX}}</h3>
    </div>
    <div class="contentlist" style="height: 100px;width: 150px;margin-left: 100px;margin-top: 50px;float: left">
        <br><h3>商品出库MIN:</h3><br><h3>{{this.goodMIN}}</h3>
    </div>
    <div class="contentlist" style="height: 200px;width: 300px;margin-left: 100px;margin-top: 10px;float: left">
        <br><h2>本月出库量TOP1:</h2><br><h2>{{this.Top}}</h2><br>
        <h5>今日占比{{this.zb}}%</h5>&nbsp;&nbsp;&nbsp;<h5>同比增长{{this.tb}}%</h5>


    </div>
    <!-- 添加出库量柱状图 -->
    <div style="height: 400px;width: 98%;float: left;margin-top: 90px;" ref="chart"></div>
  </div>
</template>

<script>
export default {
    name:"StoreAnalysisManage",
    data(){
        return{
            daySUM:0,
            goodMAX:0,
            goodMIN:0,
            Top:0,
            zb:0,
            tb:0,
            chart:null,
            option:{
              title: {
                text: '本月总出库记录',
                subtext: '',
                left: 'center'
              },
              xAxis: {
                type: 'category',
                data: []
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [],
                  type: 'bar'
                }
              ]
            },
        }

    },
  mounted(){
        this.$axios.get(this.$httpUrl+'/analysis/getDaySum').then(res=>res.data).then(res=>{
          this.daySUM=res.data
        })
        this.$axios.get(this.$httpUrl+'/analysis/getDayMax').then(res=>res.data).then(res=>{
          this.goodMAX=res.data
        })
        this.$axios.get(this.$httpUrl+'/analysis/getDayMin').then(res=>res.data).then(res=>{
          this.goodMIN=res.data
        })
        this.$axios.get(this.$httpUrl+'/analysis/getTop').then(res=>res.data).then(res=>{
          this.Top=res.data
        })
        this.$axios.get(this.$httpUrl+'/analysis/zb').then(res=>res.data).then(res=>{
          this.zb=res.data
        })
        this.$axios.get(this.$httpUrl+'/analysis/tb').then(res=>res.data).then(res=>{
          this.tb=res.data
        })
        this.$axios.get(this.$httpUrl+'/analysis/getSum').then(res=>res.data).then(res=>{
            for(var i=0;i<res.data.length; i++){
                this.option.xAxis.data[i]=(res.data[i].date);
                this.option.series[0].data[i]=(res.data[i].value)
            }
          this.$nextTick(() => {
            this.getPage()
          });

        })
    },
    methods:{
        getPage() {
            // 引用chart并初始化
            this.chart = this.$echarts.init(this.$refs.chart);
            // 使用刚指定的配置项和数据显示图表。
            this.chart.setOption(this.option);
        },
    }
}
</script>

<style>
.contentlist{
    line-height: 19px;
    text-align: center;
    border-radius:3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

}

</style>